<!-- 商品 -->
<template>
	<view class="container">
		<view class="list">
			<!-- 店名 -->
			<text class="list-title">
				<text class="iconfont">&#xe602;</text>
				鱼米之乡农资站
			</text>
			<!-- 商品列表 -->
			<view class="list-item" v-for="value in 2" :key="value">
				<image class="pic" src="/pagesC-shopping/static/images/will-delete/02.png" mode="aspectFit"></image>
				<view class="content">
					<view class="header">
						<text class="name">舒绝瓶装红火蚁药红蚂蚁杀蚁</text>
						<text class="total">￥17.8</text>
					</view>
					<view class="body">
						<text class="label">单价:¥8.9</text>
						<text class="label">x2</text>
					</view>
				</view>
			</view>
			<!-- 合计 -->
			<view class="list-summary">
				<text class="label">共4件商品，小计：</text>
				<text class="label bold">￥78.27</text>
			</view>
		</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
	.container {
		padding: 25rpx 25rpx 0;
	}

	.list {
		border-radius: 20rpx;
		background-color: white;
		padding: 26rpx 26rpx 0;

		&-title {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;

			.iconfont {
				fontn-size: 34rpx;
				color: #999999;
				margin-right: 10rpx;
			}
		}

		&-item {
			display: flex;
			align-items: center;
			height: 180rpx;
			border-bottom: 1rpx solid #E5E5E5;

			.pic {
				flex-shrink: 0;
				width: 90rpx;
				height: 90rpx;
			}

			.content {
				flex-grow: 1;
				padding-left: 20rpx;

				.header {
					display: flex;
					line-height: 1.5;

					.name {
						flex-grow: 1;
						width: 0;
						font-weight: bold;
						font-size: 28rpx;
						color: #222222;
						padding-right: 10rpx;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.total {
						flex-shrink: 0;
						font-weight: bold;
						font-size: 26rpx;
						color: #222222;
					}
				}

				.body {
					display: flex;
					justify-content: space-between;
					line-height: 2;

					.label {
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}
			}
		}

		&-summary {
			display: flex;
			justify-content: flex-end;
			line-height: 86rpx;

			.label {
				font-size: 28rpx;
				color: #222222;

				&.bold {
					font-weight: bold;
				}
			}
		}
	}
</style>